<!-- 业务概况查询 -->
<template>
	<div class="app-container">
		<yd-form :options="formOptions" :model="formData" @form-init="formInit" @search="formInit">
			<template #form-btn>
				<el-button type="primary" icon="Search" @click="formInit">查 询</el-button>
				<el-button style="margin-left: 15px" type="primary" @click="downloadHandler">下载</el-button>
				<el-button type="primary" @click="downloadStep">导出步骤</el-button>
			</template>
		</yd-form>
		<!-- 搜索条件 -->

		<!-- 业务概况列表 -->
		<YdCard>
			<YdTable
				:formData="formData"
				:tableConfig="tableConfig"
				:tableData="tableData.data"
				@sizeChangeHandler="searchHandler"
				@currentChangeHandler="searchHandler"
				@sortChangeHandler="searchHandler"
			></YdTable>
		</YdCard>
	</div>
</template>

<script setup lang="tsx" name="BusinessOverview">
import { ref, reactive, computed, getCurrentInstance, onActivated } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { queryBusinessOverviewListPage, exportBusinessOverviewList, exportStepList } from '@/api/bpm/business/business_overview';
import { toDecimalFormate, downloadFromBlob } from '@/utils/common';
// const { proxy } = getCurrentInstance();
// const instance = { proxy };
const instance = getCurrentInstance();
const proxy = instance?.proxy;

const route = useRoute();
const router = useRouter();

// 搜索表单数据
const formData = reactive<FormModelType>({
	pageSize: 10,
	pageNum: 1,
	orderByColumn: 'visitCount',
	isAsc: 'desc',
});

const formOptions = ref<FormOptionType>([
	{
		type: 'select',
		prop: 'systemId',
		label: '业务系统',
		api: {
			name: 'queryAppSystemOptions',
			params: { isStatus: 1 },
		},
	},
	{
		type: 'date-picker',
		prop: 'dateRange',
		dateType: 'datetimerange',
		label: '时间范围',
		span: 8,
	},
	{
		type: 'select',
		prop: 'dataCenterList',
		label: '数据中心',
		api: {
			name: 'queryDataCenter',
		},
		isInitValue: false,
		cascaders: [
			{
				cascadersParams: 'areaCodeList',
				api: {
					name: 'queryCityAreaOptions',
				},
			},
		],
	},
	{
		type: 'select',
		prop: 'areaCodeList',
		label: '归属城市',
		selectKey: 'value',
		attrs: {
			multiple: true,
		},
	},
	{
		type: 'input',
		prop: 'businessName',
		label: '业务名称',
	},
]);

let cloneFormData: FormModelType = {};
// 列表配置
const tableConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '业务名称',
			prop: 'businessName',
		},
		{
			label: '访问量',
			prop: 'visitCount',
			sortable: true,
		},
		{
			label: '完整访问量',
			prop: 'completeVisitCount',
			sortable: true,
		},
		{
			label: '平均处理时长',
			prop: 'avgResponseTime',
			sortable: true,
			formatter(row, val) {
				return toDecimalFormate(val, 'wm');
			},
		},
		{
			label: '告警访问量',
			prop: 'alarmVisitCount',
			sortable: true,
			operation: [
				{
					text: undefined,
					rowKey: 'alarmVisitCount',
					color: '#ff9a0c',
					handler: (scope) => {
						const row = scope.row;
						let data = JSON.stringify({
							systemId: row.systemId,
							startTime: formData.startTime,
							endTime: formData.endTime,
							businessCodeList: [row.businessCode],
							isAlarm: 1,
						});
						router.push({
							path: '/business-monitor/monitor-query/business-list',
							query: {
								data,
							},
						});
					},
				},
			],
		},
		{
			label: '失败访问量',
			prop: 'failVisitCount',
			sortable: true,
			operation: [
				{
					text: undefined,
					color: '#fe5578',

					rowKey: 'failVisitCount',
					handler: (scope) => {
						let data = JSON.stringify({
							systemId: scope.row.systemId,
							businessCodeList: [scope.row.businessCode],
							dataCenterList: String(formData.dataCenterList),
							areaCodeList: formData.areaCodeList,
							startTime: formData.startTime,
							endTime: formData.endTime,
							dealState: 0,
						});
						// isWhite('/business-monitor/monitor-query/business-list', {
						// 	data,
						// });
						router.push({
							path: '/business-monitor/monitor-query/business-list',
							query: {
								data,
							},
						});
					},
				},
			],
		},
		{
			label: '成功访问量',
			prop: 'successVisitCount',
			sortable: true,
			operation: [
				{
					text: undefined,
					rowKey: 'successVisitCount',
					handler: (scope) => {
						let data = JSON.stringify({
							systemId: scope.row.systemId,
							businessCodeList: [scope.row.businessCode],
							dataCenter: String(formData.dataCenterList),
							areaCodeList: formData.areaCodeList,
							startTime: formData.startTime,
							endTime: formData.endTime,
							dealState: 1,
						});
						// isWhite('/business-monitor/monitor-query/business-list', {
						// 	data,
						// });
						router.push({
							path: '/business-monitor/monitor-query/business-list',
							query: {
								data,
							},
						});
					},
				},
			],
		},
		{
			label: '成功率',
			prop: 'successRate',
			sortable: true,
			formatter(row, val) {
				return val + '%';
			},
		},
		{
			label: '健康度',
			prop: 'healthRate',
			sortable: true,
			formatter(row, val) {
				return val + '%';
			},
		},
		{
			label: '操作',
			prop: '',
			operation: [
				{
					text: '明细',
					handler: (scope) => {
						let data = JSON.stringify({
							systemId: scope.row.systemId,
							businessCodeList: [scope.row.businessCode],
							dataCenterList: String(formData.dataCenterList),
							areaCodeList: formData.areaCodeList,
							startTime: formData.startTime,
							endTime: formData.endTime,
						});
						// isWhite('/business-monitor/monitor-query/business-list', {
						// 	data,
						// });
						router.push({
							path: '/business-monitor/monitor-query/business-list',
							query: {
								data,
							},
						});
					},
				},
			],
		},
	],
	pagination: {
		pageNum: 1,
	},
	loading: true,
});
// 列表数据
const tableData = reactive({
	data: [],
});
// 下载状态
const downloading = ref(false);
// 导出步骤按钮
const exportLoading = ref(false);
const downloadStartTime = ref('');
const downloadEndTime = ref('');
let pageInit = ref(true);
initQuery(route.query, formData);
onActivated(() => {});

// 格式化传过来的参数
function initQuery(query: anyObj, formData: FormModelType) {
	try {
		let data = JSON.parse(query.data);
		for (let key in data) {
			formData[key] = data[key];
		}
	} catch {
		for (let key in query) {
			formData[key] = query[key];
		}
	}
}

function formInit() {
	initQuery(route.query, formData);
	tableConfig.pagination!.pageNum = 1;
	searchHandler();
}

// 搜索
function searchHandler() {
	tableConfig.loading = true;

	downloadStartTime.value = formData.startTime;
	downloadEndTime.value = formData.endTime;
	queryBusinessOverviewListPage(formData).then((res: ApiResponse) => {
		tableConfig.loading = false;
		if (res.code !== 0) {
			tableData.data = [];
			tableConfig.pagination!.total = 0;
			return;
		}
		tableConfig.pagination!.total = res.data.total;
		tableData.data = res.data.data;
	});
}
// 下载
function downloadHandler() {
	const d = JSON.parse(JSON.stringify(formData));
	d.pageNum = undefined;
	d.pageSize = undefined;

	d.startTime = downloadStartTime.value;
	d.endTime = downloadEndTime.value;
	downloading.value = true;
	exportBusinessOverviewList(d).then((res) => {
		downloading.value = false;
		downloadFromBlob(res, '业务概况列表').then((o) => {
			if (!o.flag) {
				proxy?.$message.warning(o.msg);
			}
		});
	});
}
// 导出步骤
function downloadStep() {
	const d = {
		systemId: formData.systemId,
		startTime: formData.startTime,
		endTime: formData.endTime,
		areaCodeList: formData.areaCodeList,
	};
	exportLoading.value = true;
	exportStepList(d).then((res) => {
		exportLoading.value = false;
		downloadFromBlob(res, '全量业务步骤统计数据').then((o) => {
			if (!o.flag) {
				proxy?.$message.warning(o.msg);
			}
		});
	});
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.style-split-yd-card {
	:deep(.el-card) {
		background-color: rgba(29, 39, 75, 0.31);
		border: unset;
		border-radius: 12px;
	}
}
</style>
